<template>
  <d2-container class="user-info-content">
    <div class="user-page-form">
      <el-form ref="userForm" label-position="top" :rules="rules" :model="userForm" size="default">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-input placeholder="请输入内容" v-model="userForm.userName" class="">
              <template slot="prepend">用户名称</template>
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-input placeholder="请输入内容" v-model="userForm.phone" class="">
              <template slot="prepend">用户电话</template>
            </el-input>
          </el-col>
          <el-col :span="3">
            <el-button @click="submit" type="primary" class="button-user" icon="el-icon-search">查询</el-button>
          </el-col>
          <el-col :span="3">
            <el-button @click="reset" type="primary" class="button-user"><i class="fa fa-repeat" aria-hidden="true"></i> 重置</el-button>
          </el-col>
          <el-col :span="3">
            <el-button @click="addUser" type="primary" class="button-user" icon="el-icon-edit">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-progress :percentage="100"></el-progress>
    </div>
    <d2-crud
      :columns="columns"
      :data="userInfo"
      :options="options"
      :loading="loading"
      :pagination="pagination"
      @pagination-current-change="paginationCurrentChange"/>
  </d2-container>
</template>

<script>
import { loadAllUser } from '@api/sys.user'
export default {
  data () {
    return {
      userForm: {
        userName: '',
        phone: ''
      },
      rules: {},
      userInfo: [],
      columns: [
        { title: 'ID', key: 'id', width: 60 },
        { title: '用户名', key: 'userName', width: 160 },
        { title: '电话', key: 'phone' },
        { title: '创建日期', key: 'createTime' },
        { title: '最近登录时间', key: 'lastLoginTime' }
      ],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      options: {
        border: true
      }
    }
  },
  methods: {
    paginationCurrentChange (currentPage) {
      this.pagination.currentPage = currentPage
      this.fetchData()
    },
    fetchData () {
      this.loading = true
      this.loadData()
    },
    submit () {
      this.loadData()
    },
    loadData () {
      let vm = this
      this.loading = true
      this.userForm.pageNum = this.pagination.currentPage
      loadAllUser(this.userForm).then(res => {
        vm.userInfo = res.list
        vm.pagination.total = res.total
        vm.pagination.currentPage = res.pageNum
        vm.pagination.pageSize = res.pageSize
        this.loading = false
      }).catch(err => {
        console.info(err)
      })
    },
    addUser () {
      console.info('????')
    },
    reset () {
      this.userForm = {}
    }
  }
}
</script>

<style lang="scss">
.user-info-content {
  @extend %unable-select;
  $backgroundColor: #F0F2F5;
  // ---
  .user-page-form {
    font-size: 14px;
    backgroundColor: #e5e9f2;
    .button-user{
      width: 100%;
    }
  }
}
</style>
